<!DOCTYPE html>
<html lang="en">
<head>
<title>T5 - Div T1</title>
<style>
h1 {
text-align: center;
font-size: 45px;
}
#outer {
height: 1000px;
width: 1000px;
border: 1px solid;
margin: 0 auto;
}
#header {
height: 500px;
width: 1000px;
}
#header_left {
float: left;
background-color: purple;
height: 500px;
width: 500px;
}
#header_right {
float: right;
background-color: skyblue;
height: 500px;
width: 500px;
}
#footer {
height: 500px;
width: 1000px;
}
#footer_left {
float: left;
background-color: skyblue;
height: 500px;
width: 500px;
}
#footer_right {
float: right;
height: 500px;
width: 500px;
}
#footer_top {
height: 250px;
width: 500px;
}
#footer_top_left {
float: left;
height: 250px;
width: 250px;
background-color: orange;
}
#footer_top_right {
float: right;
height: 250px;
width: 250px;
background-color: yellow;
}
#footer_bottom {
height: 250px;
width: 500px;
}
#footer_bottom_left {
float: left;
height: 250px;
width: 250px;
background-color: yellow;
}
#footer_bottom_right {
float: right;
height: 250px;
width: 250px;
}
#footer_bottom_right_top {
background-color: green;
height: 125px;
width: 250px;
}
#footer_bottom_right_bottom {
width: 250px;
height: 125px;
}
#footer_bottom_right_bottom_1 {
float: left;
height: 125px;
width: 50px;
background-color: purple;
}
#footer_bottom_right_bottom_2 {
float: left;
height: 125px;
width: 50px;
background-color: violet;
}
#footer_bottom_right_bottom_3 {
float: left;
height: 125px;
width: 50px;
background-color: purple;
}
#footer_bottom_right_bottom_4 {
float: left;
height: 125px;
width: 50px;
background-color: violet;
}
#footer_bottom_right_bottom_5 {
float: left;
height: 125px;
width: 50px;
background-color: purple;
}
</style>
</head>
<body>
<h1>Task - 5 | Div Task - 1</h1>
<div id="outer">
<div id="header">
<div id="header_left"></div>
<div id="header_right"></div>
</div>
<div id="footer">
<div id="footer_left"></div>
<div id="footer_right">
<div id="footer_top">
<div id="footer_top_left"></div>
<div id="footer_top_right"></div>
</div>
<div id="footer_bottom">
<div id="footer_bottom_left"></div>
<div id="footer_bottom_right">
<div id="footer_bottom_right_top"></div>
<div id="footer_bottom_right_bottom">
<div id="footer_bottom_right_bottom_1"></div>
<div id="footer_bottom_right_bottom_2"></div>
<div id="footer_bottom_right_bottom_3"></div>
<div id="footer_bottom_right_bottom_4"></div>
<div id="footer_bottom_right_bottom_5"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>